import React, { Component } from 'react'
import Siber from './Siber'

import { getList } from '../../servers';

import {Button} from 'antd-mobile'
export default  class Menu extends Component {
  
  constructor(){
    super();
    this.state={
    foot:[]
    }
  }
  
  componentDidMount(){
    getList()
    .then(resp=>{
      this.setState({
       foot: resp.data.data,
      })
    })
   }

  handlClick=(id)=>{
    
    getList(id)
    .then(resp=>{
     this.setState({
        foot: resp.data.data,
     })
    })
   }
  
handlCll(id){
  
  this.props.history.push(`/detail/${id}`)
}
  
  render() {
    
    const lib=[
      {"id":1,"title":"油画"},
      {"id":2,"title":"搜索"},
      {"id":3,"title":"点睡"},
      {"id":4,"title":"唉唉"},
      {"id":5,"title":"多点"},
    ]
    return (
      <div className="main">
       <Siber lib={lib} 
       handlClick={this.handlClick}
       />
       <div>
           {
             this.state.foot.map(todo=>{
               return <div key={todo.id}>
                <img 
                onClick={this.handlCll.bind(this,todo.id)}
                src={todo.img} />
                <span>{todo.title}</span>
                <Button type="ghost" size="small">加入购物车</Button>
               </div>
             })
           }
           
          </div>
       </div>
      
    )
  }
}

